<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填充</title>
    <style>
        canvas{
            float: left;
        }
        #myd{
            margin-left: -200px;
            margin-top: -20px;
        }
        #mye{
            margin-top:-30px ;
            margin-left: -270px;
            font-size: 50px;
        }
    </style>
</head>
<body>
<canvas id="myc"></canvas>
<canvas id="myd"></canvas>
<canvas id="mye" ></canvas>
<script>
    //三角形矩形
    var c=document.getElementById("myc");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#ffcc33";
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,100);
    ctx.lineTo(50,50);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    var atx=c.getContext("2d");
    atx.fillStyle="#8cff1a";
    atx.beginPath();
    atx.moveTo(0,0);
    atx.lineTo(100,0);
    atx.lineTo(50,50);
    atx.closePath();
    atx.stroke();
    atx.fill();
    var btx=c.getContext("2d");
    btx.fillStyle="#ff66b3";
    btx.beginPath();
    btx.moveTo(100,0);
    btx.lineTo(100,100);
    btx.lineTo(50,50);
    btx.closePath();
    btx.stroke();
    btx.fill();
    var ctx=c.getContext("2d");
    ctx.fillStyle="#e066ff";
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(0,100);
    ctx.lineTo(50,50);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    //渐变色
    var d=document.getElementById("myd");
    var atx=d.getContext("2d");
    var my_gradient=atx.createLinearGradient(0,0,200,170);
    my_gradient.addColorStop(0,"#332600");

   my_gradient.addColorStop(0.2,"#997300");
    my_gradient.addColorStop(0.4,"#e6ac00");
    my_gradient.addColorStop(0.6,"#ffd966");
    my_gradient.addColorStop(0.8,"#ffecb3");
    my_gradient.addColorStop(1,"white");
    atx.fillStyle=my_gradient;
    atx.fillRect(20,20,150,100);
    //渐变文字
    var e=document.getElementById("mye")
    var stx=e.getContext("2d");
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    stx.font="30px Verdana";
    gradient.addColorStop(0,"magenta");
    gradient.addColorStop(0.2,"red");
    gradient.addColorStop(0.4,"orange");
    gradient.addColorStop(0.5,"yellow");
    gradient.addColorStop(0.6,"green");
    gradient.addColorStop(0.8,"blue");
    gradient.addColorStop(1.0,"purple");
    // 填充一个渐变
    stx.strokeStyle=gradient;
    stx.strokeText("哈哈哈",10,90);
</script>

</body>
</html>